<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div class="box1"></div>
        <p class="p"></p>
    </div>
    <div class="box3">
    </div>
    <div class="box2"></div>
</body>

<script>
    var box = document.querySelector('#box');
    // 在box元素中动态添加一个 span元素
    var res = document.createElement('span');
    let t1 = document.createTextNode("我是span");
    res.appendChild(t1)

    let box1 = document.querySelector(".box1");
    box.insertBefore(res, box1)

    let p = document.querySelector(".p");
    box.removeChild(p)

    let box2 = document.querySelector(".box2");
    box2.remove()

    let a = document.createElement("a");
    // console.log(a)
    let box3 = document.querySelector(".box3")
    let bb = box3.parentElement;

    bb.replaceChild(a, box3)

</script>

</html>